<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
     <!-- daterange picker -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
    <!-- jvectormap -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
     <!-- DataTables -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
	<!-- jQuery 2.1.4 -->
    <script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
	<!-- Bootstrap 3.3.5 -->
    <script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
	 <!-- AdminLTE App -->
    <script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
    <!-- Select2 -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
    
         <script src="<s:url value="/resources"/>/adminlte/default.js"></script>
      <script src="<s:url value="/resources"/>/adminlte/default_settlement.js"></script>
       <script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
       
      
      <!-- 百度地图 -->
   <style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#table{
	float:left;
	width:302px;
	line-height:1.8em;
	font-size:14px;
	/*border-left:#999999 1px solid;
	border-top:#999999 1px solid;*/
   }
	#table li{
	float:left;
	width:300px;
	list-style:none outside;
	/*border-bottom:#999999 1px solid;
	border-right:#999999 1px solid;*/
	text-align:center;
}
#table div{
	float:left;
}
.left{
	width:99px;
 /*border-right:#999999 1px solid;*/
}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pWpfYkCbEHczf7UNja4U8FbVnk99U4k8"></script>
</head>
<body class="skin-blue sidebar-mini">
<input type="hidden"  id="falseload">
<div id="allmap" style="width:100%;height: 100%;position:relative; z-index:1;"   ></div>      
      <script type="text/javascript">
	// 百度地图API功能
	map = new BMap.Map("allmap",{minZoom:5,maxZoom:16});
	//map.centerAndZoom(new BMap.Point(115.031303,39.924795),9.9);  
	//map.centerAndZoom(new BMap.Point(108.795963,35.634807), 6);
	map.centerAndZoom(new BMap.Point(114.658758,39.437906),9.5); 
	map.enableScrollWheelZoom();
	map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	  map.setMapStyle({
	        styleJson:[
	          {
	                    "featureType": "road",
	                    "elementType": "all",
	                    "stylers": {
	                              //"color": "#ffffff",
	                              "visibility": "off"
	                    }
	          }
	]
	});
	var polyline = new BMap.Polyline([
	                          		new BMap.Point(113.248996,40.00287),
	                          		new BMap.Point(117.459229,40.000479),
	                          		new BMap.Point(117.955427,40.220231),
	                          		new BMap.Point(118.791754,40.10734),
	                          		new BMap.Point(119.656877,39.948439),
	                          		
	                          		new BMap.Point(119.685565,39.989683)
	                          	], {strokeColor:"blue", strokeWeight:5, strokeOpacity:0.5});   //创建折线
	                          //	map.addOverlay(polyline);   //增加折线
	
	                        //	addArrow(polyline);
	                        		                           
        function addArrow(line){ //绘制标注的函数  
            var linePoint=line.getPath();//线的坐标串  
            var arrowCount=linePoint.length;  
            var end = new BMap.Marker(linePoint[linePoint.length-1]);  // 创建标注  
            map.addOverlay(end);               // 将标注添加到地图中  
            end.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
            var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/stop_icon.png", new BMap.Size(11,11));  
            for(var i =0;i<arrowCount;i++){ //在拐点处添加标注  
                var marker = new BMap.Marker(linePoint[i],{icon:myIcon});  // 创建标注  
                map.addOverlay(marker);              // 将标注添加到地图中  
                var label = new BMap.Label("北斗第"+(i+1)+"星",{offset:new BMap.Size(20,-10)});  
                label.setStyle({  
                    color : "blue",  
                    fontSize : "10px",  
                    height : "15px",  
                    lineHeight : "15px",  
                    backgroundColor:"rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important",//设置背景色透明  
                    border:"0px solid blue"  
                });  
                marker.setLabel(label);  
            }  
        }  
    	function addClickHandler(content,marker){
    		 
    	} 
     	function loadjsonflag(xl){
     		
     		$.getJSON("../resources/alleywayjson.json",function(data){
     			var json =data;
     					
     					  var xls=0;
     					 
     					  if(xl=="大秦线"){
							xls=8;
							map.centerAndZoom(new BMap.Point(114.658758,39.437906),9.5);							
							}
     					 if(xl=="南同蒲线"){
 							xls=1;
 					map.centerAndZoom(new BMap.Point(111.44865,35.885999), 9.5); 
 							}
     					
     					if(xl=="侯月线"){
 							xls=1;
 					map.centerAndZoom(new BMap.Point(112.399099,35.731304), 9.5); 
 							}
     					if(xl=="北同蒲线"){
 							xls=1;
 					map.centerAndZoom(new BMap.Point(112.75319,38.425416), 9.5); 
 							}
     					if(xl=="太焦线"){
 							xls=1;
 					map.centerAndZoom(new BMap.Point(112.969473,36.071903), 9.5); 
 							}     					
     					 	
     					
     				// alert(document.getElementById('dj').checked);
     				if(document.getElementById('dj').checked==false ){	map.clearOverlays();} 
     					for(var j=0;j<xls;j++){  
     						var  points = [];
     						 var col="blue";
     						 if(j==0){col="red";}
       					     var content ="";
     					for(var i=0;i<json.length;i++){
     						// alert(json[i].lb+"---"+json[i].xl );
     						if(json[i].lb==xl && json[i].xl==j){
     								  content =json[i].name;
     								  var p = new BMap.Point(json[i].lng,json[i].lat);  
     						          p.data = content;  
     						          points.push(p);  
     						} 
     						
     					}
     					// alert(points.length);  
     					//var polyline2 = new BMap.Polyline(points, {strokeColor:col,strokeStyle:"dashed" ,strokeWeight:3, strokeOpacity:0.5});   //创建折线
     				    var polyline2 = new BMap.Polyline(points, {strokeColor:col,strokeStyle:"" ,strokeWeight:8, strokeOpacity:0.5});   //创建折线
     				        
     					map.addOverlay(polyline2); 
     					
     				     var linePoint=polyline2.getPath();//线的坐标串  
                         var arrowCount=linePoint.length;  
                        
                         //var myIcon = new BMap.Icon("http://api0.map.bdimg.com/images/stop_icon.png", new BMap.Size(11,11));  
                         var myIcon = new BMap.Icon("<s:url value="/resources"/>/img/bd.png", new BMap.Size(16,16));  
                         for(var i =0;i<points.length;i++){ //在拐点处添加标注  
                             var marker = new BMap.Marker(linePoint[i],{icon:myIcon});  // 创建标注 
                             //marker.setZIndex(i+1);
                             map.addOverlay(marker);              // 将标注添加到地图中  
                          
                             addClickHandler(points[i].data,marker);
                        	 
                             var label = new BMap.Label(points[i].data,{offset:new BMap.Size(20,-10)});  
                             label.setStyle({  
                                 color : "blue",  
                                 fontSize : "10px",  
                                 height : "15px",  
                                 lineHeight : "15px",  
                                 backgroundColor:"rgba(255, 255, 255, 0.8) none repeat scroll 0 0 !important",//设置背景色透明  
                                 border:"0px solid blue"  
                             });  
                             marker.setLabel(label);  
                         } 
                         
     					}
     					
     		});		   
     		
     	}
     	
     	var opts = {
				enableMessage:true//设置允许信息窗发送短息
			   };
     		function addClickHandler(content,marker){
     			marker.addEventListener("click",function(e){
     				openInfo(content,e)}
     			);
     		}
     		function openInfo(content,e){
     			
     			$.ajax( {
     			    type : "POST",
     			    dataType: "json",
     			   data: {"mc":content}, 
     			    url : "<s:url value="/"/>baidumapcontroller/getAlleywayList",  
     			    success : function(data){ 
     			    	var content1="<FONT COLOR=''><B>"+content+"</B></FONT><br>";
     			    	if(data.length>0){
     			    	content1 += "<div  id='table'><li><div class='left'>年度</div><div class='left'>发货(车)</div><div class='left'>收货(车)</div></li>";
     			       for(var i=0;i<data.length;i++){
     					   var obj=data[i];
     					  
     					  content1 +="<li><div class='left'>"+obj.nianf+"年</div><div class='left'>"+obj.fyl+"</div><div class='left'>"+obj.jsl+"</div></li>";
     						//	content1 +=obj.nianf+"年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+obj.fyl+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+obj.jsl+"<br>";
     						 
     					  
     						
     				       }
     			    	}else{
     			    		content1 += "<div style='line-height:1.8em;font-size:14px;'>该站点暂无信息<br>";	
     			    	}
     			    	content1 += "</div>";
     			      var p = e.target;
     	     			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
     	     			var infoWindow = new BMap.InfoWindow(content1,opts);  // 创建信息窗口对象 
     	     			map.openInfoWindow(infoWindow,point); //开启信息窗口  
     			    }
     			});
     			
     			
     		}   
     	  loadjsonflag("大秦线");
     	 //loadjsonflag("南同蒲线");
     	 function bao(s)
			{
     		// alert(s);
     		 loadjsonflag(s);
			}
     	 
     	 
     	 function addddArrow(dian){ //绘制标注的函数  
             var end = new BMap.Marker(dian);  // 创建标注  
             map.addOverlay(end);               // 将标注添加到地图中  
             end.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 	
     	 }
      
    	addddArrow(new BMap.Point(113.248996,40.00287));
     	addddArrow(new BMap.Point(119.685565,39.989683));
</script>
<div  id="lss"   style="width: 180px;height: 10px; position:absolute;z-index:500;left:20px;top:10px" >
  <SELECT NAME="lx" onchange="bao(this.options[this.options.selectedIndex].value)">
	<OPTION VALUE="大秦线" SELECTED>大秦线</OPTION>
	<OPTION VALUE="北同蒲线" >北同蒲线</OPTION>
	<OPTION VALUE="南同蒲线" >南同蒲线</OPTION>
	<OPTION VALUE="侯月线" >侯月线</OPTION>
	<OPTION VALUE="太焦线" >太焦线</OPTION>
	
	
	
	
	
  </SELECT>
  <INPUT TYPE="checkbox" NAME="dj" id="dj"> 叠加
</div>

 <div id="bg" class="yzs_bottom s2cg" style="width: 100%;height: 100px; position:absolute;z-index:500;left:10px;top:320px">
  
   <div class="yzs_bottom_close" onclick="hidediv();"><IMG SRC='<s:url value="/resources"/>/img/yc.png' WIDTH="16" HEIGHT="16" BORDER="0" ALT=""></div>
  <div class="wrap2" style="width: 31.5%;height: 200px;background:#ccc; margin:0px 0px 0px 10px; float:left">
     <!-- 数据图1 start-->
        <div class="row">
            <div class="col-xs-12">
             <!-- interactive chart -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">大秦铁路运量</h3>
                  
                </div>
                <div class="box-body">
                  <div id="interactive" style="height: 200px;margin:-50px 0px 0px 0px;"></div>
                </div><!-- /.box-body-->
              </div><!-- /.box -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
   </div>
   
    <div class="wrap2" style="width: 31.5%;height: 200px;background:#ccc; margin:0px 0px 0px 20px; float:left">
          <!-- 数据图1 start-->
        <div class="row">
            <div class="col-xs-12">
             <!-- interactive chart -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">秦皇岛港口库存</h3>
                  
                </div>
                <div class="box-body">
                  <div id="interactive1" style="height: 200px;margin:-50px 0px 0px 0px;"></div>
                </div><!-- /.box-body-->
              </div><!-- /.box -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
   </div>
   
    <div class="wrap2" style="width: 31.5%;height: 200px;background:#ccc;  margin:0px 0px 0px 20px; float:left ">
         <!-- 数据图1 start-->
        <div class="row">
            <div class="col-xs-12">
             <!-- interactive chart -->
              <div class="box box-primary">
                <div class="box-header with-border">
                  <i class="fa fa-bar-chart-o"></i>
                  <h3 class="box-title">沿海六大电厂用量</h3>
                  
                </div>
                <div class="box-body">
                  <div id="interactive2" style="height: 200px;margin:-50px 0px 0px 0px;"></div>
                </div><!-- /.box-body-->
              </div><!-- /.box -->

            </div><!-- /.col (LEFT) -->
          </div><!-- /.row -->
   </div>
 </div>
 <div  id="show"   style="display:none;width: 10px;height: 10px; position:absolute;z-index:500;left:10px;top:500px" onclick="showdiv();"><IMG SRC='<s:url value="/resources"/>/img/dk.png' WIDTH="32" HEIGHT="32" BORDER="0" ALT=""></div>
</body>
 
<script type="text/javascript">  
function showdiv() { 
 document.getElementById("bg").style.display ="block";
	 document.getElementById("show").style.display ="none";
	  }
  function hidediv() {
  document.getElementById("bg").style.display ='none';
	  document.getElementById("show").style.display ='block';
	  }


  function barAndLine(chartName,xData,yTQ) {

		// 基于准备好的dom，初始化echarts实例
	    var myChart = echarts.init(document.getElementById(chartName));
	    // 指定图表的配置项和数据
	    option = {
	    	    tooltip: {
	    	        trigger: 'axis'
	    	    },
	    	    toolbox: {
	    	        show : false,
	    	        feature : {
	    	            mark : {show: true},
	    	            dataView : {show: true, readOnly: false},
	    	            magicType : {show: true, type: ['line', 'bar']},
	    	            restore : {show: true},
	    	            saveAsImage : {show: true}
	    	        }
	    	    },
	    	    
	    	    xAxis: [
	    	        {
	    	            type: 'category',
	    	            data:xData
	    	        }
	    	    ],
	    	    yAxis: [
	    	        {
	    	            type: 'value' 
	    	        }
	    	    ],
	    	    series: [
	    	        {
	    	            name:'铁路日常交易量',
	    	            type:'line',
	    	            data:yTQ
	    	        } 
	    	    ]
	    	};
	    
	    // 使用刚指定的配置项和数据显示图表。
	    myChart.setOption(option);
	} 
  $(function(){  
	  floatArea=document.getElementById("bg");
	  floatArea.style.top=(document.body.offsetHeight -400)+"px";
      barAndLine("interactive",${xAxis},${yTQ});
      barAndLine("interactive1",${xAxis1},${yTQ1});
      barAndLine("interactive2",${xAxis2},${yTQ2});
       hidediv();
 }); 
</script>

</html>
